<?php include("includes/session.php"); ?>
<?php include("includes/connect_db.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<style>
	input{
		width: 400px;
	}

	#pilihTabel{
		height: 300px;
		border: solid 1px #DDD;
	}

	#infoTabel{
		height: 300px;
		border: solid 1px #DDD;
	}

	#dataTabel{
		margin-top: 20px;
		height: 300px;
		border: solid 1px #DDD;
	}

	.selectTabel:hover{
		background: #0088cc;
		color: #FFF;
	}
	.tr-header{
		background-color: #0088cc; 
		color: #FFF;
	}
</style>

<?php
	$sql_select_gammu = "SELECT * FROM tb_setting_gammu";
	$query_select_gammu = mysql_query($sql_select_gammu);
	$hitung_baris = mysql_num_rows($query_select_gammu);

	if ($hitung_baris == 0) {
		$lokasi = "";
		$port = "";
		$koneksi = "";
		$pin = "";
	} else {
		$query_select_gammu = mysql_query($sql_select_gammu);
		$select_gammu = mysql_fetch_array($query_select_gammu);
	}
?>

<div class="span9">  
    <h3>SMS</h3>                      
    <ul class="breadcrumb well">
        <li class="active">Database</li>                
    </ul>    
    <div class="alert alert-info" style="height: 30px;">
		<span class="help-inline span3">Pilih Koneksi Yang Digunakan</span>
		<select id="pilihHost" name="koneksi" class="span6">
			<option value="*"></option>
			<?php
				$sql_lihat_host = "SELECT * FROM tb_host";
				$query_lihat_host = mysql_query($sql_lihat_host);
				
				while ($lihat_host = mysql_fetch_array($query_lihat_host)) {
			?>
					<option value="<?php echo $lihat_host['id_host']; ?>">
						<?php echo $lihat_host['nama_host']." - ".$lihat_host['host']." - ".$lihat_host['db']; ?>
					</option>

			<?php
				}
			?>
		</select>
    </div>
    <div class="row-fluid">
	    <div id="pilihTabel" class="span3" style="overflow: auto;">
	    </div>

	    <div id="infoTabel" class="span9" style="overflow: auto;">

	    </div>
	    <div class="row-fluid">
		    <div id="dataTabel" class="span12" style="overflow: auto;">

	    	</div>
	    </div>
    </div>
	
</div>

<?php
	
?>

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
	var idHost;
	$(document).ready(function() {
		$('#pilihHost').on('change', function(){
			if ($(this).val()!="*") {
				// console.log($(this).val())
				idHost = $(this).val();
				var formTabel = {
					id : $(this).val()
				};

				$.ajax({
				  url: 'database-tabel.php',
				  type: 'POST',
				  data: formTabel,
				  complete: function(xhr, textStatus) {
				    //called when complete
				  },
				  success: function(data, textStatus, xhr) {
				    $('#pilihTabel').html(data);
				  },
				  error: function(xhr, textStatus, errorThrown) {
				    //called when there is an error
				  }
				});
			}else{
				$('#pilihTabel').html("");
			}
		});

		$('#pilihTabel').on('click', ".selectTabel", function(){
			console.log($(this).data("id"))
			var formTabel = {
				id : idHost,
				namaTabel : $(this).data("id")
			};

			$.ajax({
			  url: 'database-tabel-info.php',
			  type: 'POST',
			  data: formTabel,
			  complete: function(xhr, textStatus) {
			    //called when complete
			  },
			  success: function(data, textStatus, xhr) {
			    $('#infoTabel').html(data);
			  },
			  error: function(xhr, textStatus, errorThrown) {
			    //called when there is an error
			  }
			});
		});

		$('#pilihTabel').on('click', ".selectTabel", function(){
			console.log($(this).data("id"))
			var formTabel = {
				id : idHost,
				namaTabel : $(this).data("id")
			};

			$.ajax({
			  url: 'database-tabel-data.php',
			  type: 'POST',
			  data: formTabel,
			  complete: function(xhr, textStatus) {
			    //called when complete
			  },
			  success: function(data, textStatus, xhr) {
			    $('#dataTabel').html(data);
			  },
			  error: function(xhr, textStatus, errorThrown) {
			    //called when there is an error
			  }
			});
		});
	});
</script>